<template>
    <div>
        <HeaderPage style="box-shadow: 0 1px 10px 0 #dfdfdf; height:64px; padding:0 28px;">
        <!-- <Header style="box-shadow: 0 1px 10px 0 #dfdfdf; height:64px; padding:0 28px;"> -->
            <template v-slot:left>
                <div class="left" @click="drawer = true">
                    <i class="el-icon-menu"></i>
                </div>

                <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
                    <el-breadcrumb-item :to="{ path: '/main' }">我的课堂</el-breadcrumb-item>
                    <el-breadcrumb-item>用户设置</el-breadcrumb-item>
                </el-breadcrumb>

                <el-drawer v-model="drawer" :direction="'ltr'" size="240px">
                    <template v-slot:title>
                        <div style="width: 96px">
                            <img src="https://www.ketangpai.com/images/common/logo_blue.png" alt="logo" height="24px">
                        </div>
                    </template>
                    <el-menu class="menu">
                        <el-menu-item style="width: 100%" v-for="(item, index) in menus" :key="index"
                            @click="toNav(item.route)">
                            <span>{{ item.name }}</span>
                        </el-menu-item>
                    </el-menu>
                </el-drawer>
            </template>

            <template v-slot:right>
                <RightHeader style="position: absolute; right: 20px; top: 15px;" />
            </template>
        </HeaderPage>
        <!-- </Header> -->
        <div>
            <div class="view-user-setting">
                <div class="head-box">
                    <div class="avatar-box">
                        <el-avatar class="img" :src="circleUrl" />
                    </div>
                    <div class="user-info">
                        <h6 class="name">{{ user.name }}</h6>
                        <!-- <h6 class="name">{{ this.user.name }}</h6> -->
                        <div>
                            <el-button type="text" class="vip">开通课堂派VIP</el-button>
                        </div>
                    </div>
                </div>
                <div class="tabs-box">
                    <el-tabs v-model="activeName" style="width: 100%">
                        <el-tab-pane label="账户信息" name="first">
                            <div class="tabs-account">
                                <div>
                                    <h3>
                                        <span>账号设置</span>
                                    </h3>
                                    <ul class="form-card">
                                        <li class="list">
                                            <label class="label-title">账号</label>
                                            <p class="info-txt">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.account === undefined"></i>
                                                    {{ user.account }}
                                                        <!-- v-if="this.user.account === undefined"></i>
                                                    {{ this.user.account }} -->
                                                </span>
                                            </p>
                                        </li>
                                        <li class="list">
                                            <label class="label-title">所属角色</label>
                                            <p class="info-txt flex" v-if="!changeTypeVisible">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.type === undefined"></i>
                                                    {{ user.type === 1 ? '学生' : '老师' }}
                                                        <!-- v-if="this.user.type === undefined"></i>
                                                    {{ this.user.type === 1 ? '学生' : '老师' }} -->
                                                </span>
                                                <span class="but-box" @click="changeTypeVisible = true">去设置</span>
                                            </p>
                                            <p class="info-txt flex" v-else>
                                                <span>
                                                    <el-radio v-model="userInfo.type" :label="2">老师</el-radio>
                                                    <el-radio v-model="userInfo.type" :label="1">学生</el-radio>
                                                </span>
                                                <span>
                                                    <el-button size="mini" @click="cancelChangeType">取消</el-button>
                                                    <el-button size="mini" type="primary"
                                                        @click="submitChangeType">确定</el-button>
                                                </span>
                                            </p>
                                        </li>
                                        <li class="list">
                                            <label class="label-title">手机号</label>
                                            <p class="info-txt flex">
                                                <span class="info" style="margin-right: auto">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.phone === undefined"></i>
                                                    {{ user.phone }}
                                                </span>
                                                <span v-if="user.phone !== undefined">
                                                        <!-- v-if="this.user.phone === undefined"></i>
                                                    {{ this.user.phone }}
                                                </span>
                                                <span v-if="this.user.phone !== undefined"> -->
                                                    <span class="but-box" @click="openEditPhone">更换手机号</span>
                                                    <span style="margin: 0 6px;color: #dadce0;">|</span>
                                                    <span class="but-box" @click="deletePhone">解绑</span>
                                                </span>
                                                <span v-else>
                                                    <span class="but-box" @click="openEditPhone">绑定手机</span>
                                                </span>
                                            </p>
                                        </li>
                                        <li class="list">
                                            <label class="label-title">密码</label>
                                            <p class="info-txt flex">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.password === undefined"></i>
                                                        <!-- v-if="this.user.password === undefined"></i> -->
                                                    ******
                                                </span>
                                                <span class="but-box" @click="editPasswordVisible = true">修改密码</span>
                                            </p>
                                            <el-dialog title="修改密码" v-model="editPasswordVisible" center
                                                width="604px">
                                                <el-form :model="passwordForm" :rules="rules" ref="passwordFormRef"
                                                    label-width="100px">
                                                    <el-form-item label="新密码" prop="password">
                                                        <el-input type="password" v-model="passwordForm.password"
                                                            autocomplete="off" placeholder="请输入新密码"
                                                            show-passwordForm></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="确认新密码" prop="passAgain">
                                                        <el-input type="password" v-model="passwordForm.passAgain"
                                                            autocomplete="off" placeholder="请确认新密码"
                                                            show-passwordForm></el-input>
                                                    </el-form-item>
                                                </el-form>
                                                <template v-slot:footer>
                                                    <div class="dialog-footer">
                                                        <el-button @click="resetEditPassForm">取 消</el-button>
                                                        <el-button type="primary" @click="submitEditPass">确 认</el-button>
                                                    </div>
                                                </template>
                                            </el-dialog>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <h3 class="flex">
                                        <span>基础信息</span>
                                        <span class="but-box" v-if="!editBaseInfoVisible"
                                            @click="editBaseInfoVisible = true">编辑</span>
                                        <span v-else>
                                            <el-button size="mini" @click="cancelEditBaseInfo">取消</el-button>
                                            <el-button size="mini" type="primary" @click="submitEditBaseInfo">保存</el-button>
                                        </span>
                                    </h3>
                                    <ul class="form-card">
                                        <li class="list">
                                            <label class="label-title">姓名</label>
                                            <p class="info-txt" v-if="!editBaseInfoVisible">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.name === undefined"></i>
                                                    {{ user.name }}
                                                        <!-- v-if="this.user.name === undefined"></i>
                                                    {{ this.user.name }} -->
                                                </span>
                                            </p>
                                            <p class="input-p" v-else>
                                                <el-input v-model="userInfo.name" placeholder="请输入内容" maxlength="8"
                                                    show-word-limit></el-input>
                                            </p>
                                        </li>
                                        <li class="list">
                                            <label class="label-title" v-if="this.user.type === 2">工号</label>
                                            <label class="label-title" v-else>学号</label>
                                            <p class="info-txt" v-if="!editBaseInfoVisible">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.no === undefined"></i>
                                                    {{user.no === undefined ? '未完善' : user.no }}
                                                        <!-- v-if="this.user.no === undefined"></i>
                                                    {{ this.user.no === undefined ? '未完善' : this.user.no }} -->
                                                </span>
                                            </p>
                                            <p class="input-p" v-else>
                                                <el-input v-model="userInfo.no" placeholder="请输入内容" maxlength="20"
                                                    show-word-limit></el-input>
                                            </p>
                                        </li>
                                        <li class="list">
                                            <label class="label-title">学校</label>
                                            <p class="info-txt" v-if="!editBaseInfoVisible">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.school === undefined"></i>
                                                    {{ user.school }}
                                                        <!-- v-if="this.user.school === undefined"></i>
                                                    {{ this.user.school }} -->
                                                </span>
                                            </p>
                                            <p class="input-p" v-else>
                                                <el-input v-model="userInfo.school" placeholder="请输入内容"></el-input>
                                            </p>
                                        </li>
                                        <li class="list">
                                            <label class="label-title">院系</label>
                                            <p class="info-txt" v-if="!editBaseInfoVisible">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.academy === undefined"></i>
                                                    {{ user.academy === undefined ? '未完善' : user.academy }}
                                                        <!-- v-if="this.user.academy === undefined"></i>
                                                    {{ this.user.academy === undefined ? '未完善' : this.user.academy }} -->
                                                </span>
                                            </p>
                                            <p class="input-p" v-else>
                                                <el-input v-model="userInfo.academy" placeholder="请输入内容"></el-input>
                                            </p>
                                        </li>
                                        <li class="list">
                                            <label class="label-title">专业</label>
                                            <p class="info-txt" v-if="!editBaseInfoVisible">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.major === undefined"></i>
                                                    {{ user.major === undefined ? '未完善' : user.major }}
                                                        <!-- v-if="this.user.major === undefined"></i>
                                                    {{ this.user.major === undefined ? '未完善' : this.user.major }} -->
                                                </span>
                                            </p>
                                            <p class="input-p" v-else>
                                                <el-input v-model="userInfo.major" placeholder="请输入内容"></el-input>
                                            </p>
                                        </li>
                                        <li class="list" v-if="user.type === 1">
                                        <!-- <li class="list" v-if="this.user.type === 1"> -->
                                            <label class="label-title">班级</label>
                                            <p class="info-txt" v-if="!editBaseInfoVisible">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.clazz === undefined"></i>
                                                    {{ user.clazz === undefined ? '未完善' : user.clazz }}
                                                        <!-- v-if="this.user.clazz === undefined"></i>
                                                    {{ this.user.clazz === undefined ? '未完善' : this.user.clazz }} -->
                                                </span>
                                            </p>
                                            <p class="input-p" v-else>
                                                <el-input v-model="userInfo.clazz" placeholder="请输入内容"></el-input>
                                            </p>
                                        </li>
                                        <li class="list" v-if="user.type === 1">
                                        <!-- <li class="list" v-if="this.user.type === 1"> -->
                                            <label class="label-title">年级</label>
                                            <p class="info-txt" v-if="!editBaseInfoVisible">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.grade === undefined"></i>
                                                    {{ user.grade === undefined ? '未完善' : user.grade }}
                                                        <!-- v-if="this.user.grade === undefined"></i>
                                                    {{ this.user.grade === undefined ? '未完善' : this.user.grade }} -->
                                                </span>
                                            </p>
                                            <p class="input-p" v-else>
                                                <el-select placeholder="请选择" v-model="userInfo.grade" style="width: 210px;">
                                                    <el-option value="1年级">1年级</el-option>
                                                    <el-option value="2年级">2年级</el-option>
                                                    <el-option value="3年级">3年级</el-option>
                                                    <el-option value="4年级">4年级</el-option>
                                                    <el-option value="5年级">5年级</el-option>
                                                    <el-option value="6年级">6年级</el-option>
                                                </el-select>
                                            </p>
                                        </li>
                                        <!-- <li class="list" v-if="this.user.type === 1">
                                            <label class="label-title">入学时间</label>
                                            <p class="info-txt" v-if="!editBaseInfoVisible">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="this.user.enterTime === ''"></i>
                                                    {{ this.user.enterTime === '' ? '未完善' : this.user.enterTime }}
                                                </span>
                                            </p>
                                            <p class="input-p" v-else>
                                                 <el-date-picker type="date" placeholder="选择日期" style="width:205px"
                                                    v-model="userInfo.enterTime" format="yyyy 年 MM 月 dd 日"
                                                    value-format="yyyy-MM-dd">
                                                </el-date-picker>

                                                <el-date-picker type="datetime" placeholder="选择日期" style="width:205px"
                                                    v-model="userInfo.enterTime">
                                                </el-date-picker>
                                            </p>
                                        </li> -->
                                        <li class="list" v-if="this.user.type === 2">
                                            <label class="label-title">所授课程</label>
                                            <p class="info-txt" v-if="!editBaseInfoVisible">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.course === undefined"></i>
                                                    {{ user.course === undefined ? '未完善' : user.course }}
                                                        <!-- v-if="this.user.course === undefined"></i>
                                                    {{ this.user.course === undefined ? '未完善' : this.user.course }} -->
                                                </span>
                                            </p>
                                            <p class="input-p" v-else>
                                                <el-input v-model="userInfo.course" placeholder="请输入内容"></el-input>
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <h3 class="flex">
                                        <span>第三方账号绑定</span>
                                    </h3>
                                    <ul class="form-card">
                                        <li class="list">
                                            <label class="label-title">邮箱绑定</label>
                                            <p class="info-txt flex">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.email === undefined"></i>
                                                    {{ user.email === undefined ? '未完善' : user.email }}
                                                </span>
                                                <span class="but-box" @click="openEditEmail"
                                                    v-if="user.email === undefined">立即绑定</span>
                                                        <!-- v-if="this.user.email === undefined"></i>
                                                    {{ this.user.email === undefined ? '未完善' : this.user.email }}
                                                </span>
                                                <span class="but-box" @click="openEditEmail"
                                                    v-if="this.user.email === undefined">立即绑定</span> -->
                                                <span class="but-box" @click="deleteEmail" v-else>解绑</span>
                                            </p>
                                        </li>
                                        <li class="list">
                                            <label class="label-title">微信绑定</label>
                                            <p class="info-txt flex">
                                                <span class="info">
                                                    <i class="el-icon-warning font-color--warning"
                                                        v-if="user.wechat === undefined"></i>
                                                    {{ user.wechat === undefined ? '未完善' : user.wechat }}
                                                </span>
                                                <span class="but-box" @click="openEditWechat"
                                                    v-if="user.wechat === undefined">立即绑定</span>
                                                        <!-- v-if="this.user.wechat === undefined"></i>
                                                    {{ this.user.wechat === undefined ? '未完善' : this.user.wechat }}
                                                </span>
                                                <span class="but-box" @click="openEditWechat"
                                                    v-if="this.user.wechat === undefined">立即绑定</span> -->
                                                <span class="but-box" @click="deleteWechat" v-else>解绑</span>
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="通知设置" name="second">通知设置</el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HeaderPage from "../../components/header/AppHeader.vue";
// import Header from "../../components/header/HeaderPage.vue";
import circleUrl from "../../assets/homePage/成绩管理.png";
import RightHeader from "../../components/header/RightHeader.vue";
import { deleteEmptyOption } from "@/utils/deleteEmptyOption";
import { Encrypt } from "@/utils/decrypt";
import {ElMessage } from "element-plus";
import { mapState } from "vuex";
import Storage from "@/utils/storage";
import { post } from "@/utils/request";
// import { Message } from "element-ui";
// import { mapState } from "vuex";

export default {
    name: "UserSetting",
    components: {
        HeaderPage,
        RightHeader
    },
    data() {
        let user = Storage.getSession("user");
    //     Header,
    //     RightHeader
    // },
    // data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.passwordForm.passAgain !== '') {
                    this.$refs.passwordFormRef.validateField('passAgain');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.passwordForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            circleUrl: circleUrl,
            drawer: false,
            user,
            menus: [
                {
                    name: '我的课堂',
                    route: '/main'
                },
                {
                    name: '备课区',
                    route: '/lessonPreparationArea'
                },
                {
                    name: '虚拟教研室',
                    route: '/teachingResseach'
                }
            ],
            activeName: 'first',
            userInfo: {},
            passwordForm: {
                password: null,
                passAgain: null
            },
            editBaseInfoVisible: false,
            changeTypeVisible: false,
            changePhoneVisible: false,
            editPasswordVisible: false,
            rules: {
                password: [
                    { validator: validatePass, required: true, trigger: 'blur' }
                ],
                passAgain: [
                    { validator: validatePass2, required: true, trigger: 'change' }
                ],
            },
        }
    },
    methods: {
        // 初始化基础信息
        initBaseInfo() {
            this.userInfo = { ...this.user };
            this.userInfo = deleteEmptyOption(this.userInfo);
        },
        // 页面跳转
        toNav(nav) {
            this.$router.push(nav);
        },
        // 用户信息修改确认
        submitEditUserInfo() {
            console.log(this.userInfo)
            post("/user/update", this.userInfo).then(res => {
                // if (res) {
                //     this.$store.dispatch('saveUserInfo', { user: this.userInfo });
                // }
                Storage.setSession("user", this.userInfo);
                this.user = this.userInfo;
                console.log(res);

            // this.$http.post("/user/update", this.userInfo).then(res => {
            //     if (res) {
            //         this.$store.dispatch('saveUserInfo', { user: this.userInfo });
            //     }
            })
        },
        // 取消修改基础信息
        cancelEditBaseInfo() {
            this.initBaseInfo();
            this.editBaseInfoVisible = false;
        },
        // 基础信息修改确认
        submitEditBaseInfo() {
            if (this.userInfo.no === '') {
                let type;
                if (this.user.type === 1) type = '学号';
                else type = '工号';
                ElMessage.error(type + '不允许为空');
            } else if (this.userInfo.name === '') {
                ElMessage.error('姓名不允许为空');
            } else if (this.userInfo.school === '') {
                ElMessage.error('学校不允许为空');
            }
            else {
                this.submitEditUserInfo();
            }
            this.editBaseInfoVisible = false;
        },
        // 取消修改身份类型
        cancelChangeType() {
            this.userInfo.type = this.user.type;
            this.changeTypeVisible = false;
        },
        // 身份类型修改确认
        submitChangeType() {
            this.submitEditUserInfo();
            this.changeTypeVisible = false;
        },
        // 手机号修改
        openEditPhone() {
            this.$prompt('', '修改手机号', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then((value) => {
                this.userInfo.phone = value.value;
                this.submitEditUserInfo();
            }).catch(() => {
            });
        },
        // 解绑手机号
        deletePhone() {
            this.$confirm('', '您确定要解绑吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.userInfo.phone = '';
                this.submitEditUserInfo();
                ElMessage.success("解绑成功");
                // Message.success("解绑成功");
            }).catch(() => {
            });
        },
        // 邮箱修改
        openEditEmail() {
            this.$prompt('', '绑定邮箱', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then((value) => {
                this.userInfo.email = value.value;
                this.submitEditUserInfo();
            }).catch(() => {
            });
        },
        // 解绑邮箱
        deleteEmail() {
            this.$confirm('', '您确定要解绑吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.userInfo.email = '';
                this.submitEditUserInfo();
                ElMessage.success("解绑成功");
                // Message.success("解绑成功");
            }).catch(() => {
            });
        },
        // 微信修改
        openEditWechat() {
            this.$prompt('', '绑定微信', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then((value) => {
                this.userInfo.wechat = value.value;
                this.submitEditUserInfo();
            }).catch(() => {
            });
        },
        // 解绑微信
        deleteWechat() {
            this.$confirm('', '您确定要解绑吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.userInfo.wechat = '';
                this.submitEditUserInfo();
                ElMessage.success("解绑成功");
                // Message.success("解绑成功");
            }).catch(() => {
            });
        },
        // 密码修改确认
        submitEditPass() {
            this.$refs.passwordFormRef.validate(async valid => {
                if (!valid) return;
                if (valid) {
                    this.userInfo.password = Encrypt(this.passwordForm.password);
                    this.$http.post("/user/update", this.userInfo).then(res => {
                        if (res) {
                            this.editPasswordVisible = false;
                            this.resetEditPassForm();
                            this.$ElMessage.success("请重新登录。");
                            // this.$message.success("请重新登录。");
                            // 此处处理状态，将用户登出
                            this.$router.push('/');
                            this.$store.dispatch('logout');
                        }
                    })
                }
            })
        },
        // 取消修改密码
        resetEditPassForm() {
            this.editPasswordVisible = false;
            this.$refs.passwordFormRef.resetFields();
        },
    },
    created() {
        this.initBaseInfo();
    },
    computed: {
        ...mapState({ user: state => state.user.user.user }),
    
    }
}
</script>

<style scoped lang="less">
.left {
    margin-right: 15px;
    display: inline-block;
    padding: 10px;
    cursor: pointer;
}

.menu {
    font-weight: 600;
}

.view-user-setting {
    font-size: 14px;
    width: 900px;
    margin: 0 auto;

    .head-box {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 24px;
        display: flex;
        align-items: center;

        .avatar-box {
            cursor: pointer;

            .img {
                height: 88px;
                width: 88px;
                line-height: 88px;
            }
        }

        .user-info {
            padding-left: 16px;

            h6 {
                margin-bottom: 4px;
                font-size: 20px;
            }

            .name {
                display: flex;
                align-items: center;
            }

            .vip {
                color: #4285f4;
                padding: 10px 20px;
                border-radius: 4px;
                outline: none;
            }
        }
    }

    .tabs-box {
        margin-top: 16px;

        /deep/ .el-tabs__nav-wrap::after {
            background: none;
        }
    }

    .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tabs-account {
        margin-top: 16px;
        background: #f8f9fa;
        border-radius: 0 8px 8px 0;
        padding: 0 24px 24px;

        h3 {
            font-size: 16px;
            align-items: center;
            padding: 24px 0;
            overflow: hidden;
            margin: 0;
        }

        .form-card {
            background: #fff;
            border: 1px solid #dadce0;
            border-radius: 4px;
            box-shadow: inset 4px 0 0 0 #4285f4;
            margin: 0;
            padding: 0;

            li {
                display: flex;
                align-items: center;
                padding: 16px 0;
                border-top: 1px solid #dadce0;
                margin-left: 4px;

                .label-title {
                    padding: 0 24px;
                    width: 100px;
                    text-align: left;
                }

                .info-txt {
                    flex: 1;
                    color: #5f6368;
                    padding-right: 24px;
                    text-align: left;
                    margin: 0;

                    .info {
                        color: #74787c;

                        i {
                            margin-right: 8px;
                            font-size: 16px;
                        }
                    }
                }

                .input-p {
                    min-width: 200px;
                    margin: 0;
                }
            }

            li:first-child {
                border: 0;
            }
        }
    }

    .but-box {
        font-size: 14px;
        cursor: pointer;
        color: #4285f4;
        font-weight: normal;
    }

    .font-color--warning {
        color: #ff941f;
    }

}
</style>


